<template>
<header id="commonHeader">
    <div id="left">
        <el-tooltip class="item" effect="dark" :content="isCollapse ? '展开侧边栏' : '收起侧边栏' ">
            <el-button icon="el-icon-menu" size="small" @click="isCollapseFun"></el-button>
        </el-tooltip>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item v-for="(item, index) in routerPahtList" :key="index" :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div id="right">
        <el-dropdown @command="commandClick">
            <span class="el-dropdown-img">
                <img :src="userPic" alt="">
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item :command="outLogin">退出登陆</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</header>
</template>

<script>
import router from '@/router/index';
export default {
    name:'commonHeader',
    data(){
        return {
            userPic:require('../../assets/images/userPic.jpg') // 用户头像
        }
    },
    mounted(){
        // console.log();
    },
    methods:{
        isCollapseFun(){ // 侧边栏展开收起函数
            this.$store.commit('header/ISCOLLAPSE')
        },
        commandClick(a){ // 点击头像下拉菜单项
            a()
        },
        outLogin(){ // 退出登陆函数
            this.$confirm('确定退出登陆吗？', '提示',{
                type:'warning',
            }).then(()=>{
                this.$store.commit('ISLOGIN', false)
                this.$store.commit('user/init_userinfo')
                this.$router.push({ path:'/login' })
            },()=>{})
        },
    },
    computed:{
        isCollapse(){ // 将 vuex 的 isCollapse 映射过来
            return this.$store.state.header.isCollapse
        },
        routerPathData(){ // 路由路径数据
            const routerdata = router.options.routes // 路由配置数据

            function fore(dataArray, pathstr){ // 循环递归提取路由配置数据的函数
                const data = []

                for (let i = 0; i < dataArray.length; i++) {
                    const datae = {}

                    datae.label = dataArray[i].meta.label
                    
                    datae.path = '/' + pathstr + '/' +dataArray[i].path // 拼接路径
                    datae.path = datae.path.replace(/(\/)(\1)+/g, '/') // 将 '/' 连续出现两次以上的地方替换成单个 '/'

                    if(dataArray[i].children){ // 如果有子路由则循环提取子路由数据
                        datae.children = fore(dataArray[i].children, datae.path)
                    }

                    data.push(datae)
                }

                return data
            }

            return fore(routerdata[1].children, '')
        },
        routerPahtList(){ // 动态生成面包屑数据
            const routerPaht = this.$store.state.routerPaht.path
            const routerPathData = this.routerPathData

            function fors(path, pathData, data = {
                index: -1,
                arr: [],
                as: false,
            }){
                data.index++;
                for (let i = 0; i < pathData.length; i++) {

                    data.arr[data.index] = {
                        label: pathData[i].label,
                        path: pathData[i].path
                    }

                    if(pathData[i].path === path){
                        data.as = true
                        data.arr.splice(data.index+1, 1)
                        break;
                    }else if(pathData[i].children){
                        fors(path, pathData[i].children, data)
                        if(data.as) break;
                    }
                }
                if(!data.as) data.index--;

                return data
            }

            return fors(routerPaht, routerPathData).arr
        }
    },
}
</script>

<style scoped>
#commonHeader{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#left{
    display: flex;
    align-items: center;
}
.breadcrumb{
    margin-left: 20px;
}
.el-dropdown-img img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #1e90ff;
}
</style>